<template>
	<view class="mord">
		<view class="h1">
			填写信息
		</view>
		<view class="input">
			<view class="li">
				<image src="../../static/img/3/3-10.png" mode="widthFix"></image>
				<view class="x"></view>
				<input class="min" type="number" v-model="val" placeholder="请输入手机号" />
				<view class="right" style="background: none;text-align: right;">
					<view class="b" @click="del">
						<image src="../../static/img/3/3-11.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="li">
				<image src="../../static/img/3/3-12.png" mode="widthFix"></image>
				<view class="x"></view>
				<input class="min" type="number" v-model="code" placeholder="请输入验证码" />
				<view class="right rs" v-if="tim != 0">
					发送验证码({{tim}})
				</view>
				<view class="right" @click="time" v-if="tim == 0">
					发送验证码
				</view>
			</view>
			<view class="li">
				<text>昵称</text>
				<view class="x"></view>
				<input type="text" v-model="name" placeholder="请输入昵称" />

			</view>
			<view class="li">
				<text>密码</text>
				<view class="x"></view>
				<input type="password" v-model="passa" placeholder="请输入密码" />

			</view>
			<view class="li">
				<text>密码</text>
				<view class="x"></view>
				<input type="password" v-model="passb" placeholder="请再次输入密码" />
			</view>
			<view class="li" style="visibility: hidden;">
				<text>推荐人</text>
				<view class="x"></view>
				<input type="text" v-model="recommender" />
			</view>
		</view>
		<view class="next" @click="next">
			确认
		</view>

	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				val: '',
				tim: 0,
				code: '',
				name: '',
				passa: '',
				passb: '',
				recommender: ''
			}
		},
		onLoad(options) {
			this.recommender = options.recommender
		},
		methods: {
			del() {
				this.val = ''
			},

			next() {
				var that = this;
				if (that.passa == that.passb) {


					that.$Request.post(
						that.$api.httpApi.login.reg, {
							"userName": that.name,
							'countryCode': '86',
							'password': that.passb,
							'phone': that.val,
							'bMobileVerify': true,
							'authCode': that.code,
							'sourceDetail': 2,
							recommend: that.recommender
						},
					).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '注册成功！',
								duration: 1500,
								success() {
									setTimeout(function() {
										uni.navigateTo({
											url:"/pages/login/login"
										})
									}, 2000)
								}
							});

						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})





				} else {
					uni.showToast({
						title: '两次输入的密码不一致！',
						icon: 'none'
					})
				}

			},
			time() {

				var that = this;
				that.$Request.post(
					that.$api.httpApi.login.register, {
						"phone": that.val,
						'countryCode': '86'
					},
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '发送成功！'
						})
						that.tim = 50;
						var set = setInterval(function() {
							that.tim--
							if (that.tim <= 0) {
								clearInterval(set)
							}
						}, 1000);
					} else if (res.code == 903) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})

			}
		}


	}
</script>

<style scoped>
	.next {
		display: block;
		width: 75%;
		margin: auto;
		height: 98rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 49rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 98rpx;
		margin-top: 77rpx;
	}

	.h2 {
		width: 65%;
		margin: auto;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: left;
		margin-top: 44rpx
	}

	.h2 navigator {
		color: rgba(240, 64, 111, 1);
		display: initial;
	}

	.h1 {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		padding-top: 100rpx;
	}

	.input {
		width: 75%;
		margin: auto;
		/* margin-top: 100rpx; */
	}

	.input .p {
		text-align: right;
		font-size: 28rpx;
		color: #B7B7B7;
	}

	.input .li {
		border-bottom: 1px solid #CECECE;
		padding-bottom: 20rpx;
		margin-top: 60rpx;
	}

	.input .li text {
		display: inline-block;
		vertical-align: middle;
		width: 75rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(65, 65, 65, 1);
	}

	.input .li image {
		width: 26rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.input .li input {
		display: inline-block;
		width: calc(100% - 100rpx);
		vertical-align: middle;
		margin-left: 21rpx;
		font-size: 30rpx;
		color: #B7B7B7;
		font-weight: normal;
	}

	.input .li .min {
		width: calc(100% - 130rpx - 136rpx);
	}

	.input .li .right {
		width: 176rpx;
		height: 54rpx;
		background: rgba(255, 230, 237, 1);
		border-radius: 27rpx;
		margin-left: 16rpx;
		display: inline-block;
		vertical-align: middle;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(240, 64, 111, 1);
		text-align: center;
		line-height: 54rpx;
	}

	.input .li .rs {
		background: #CECECE;
		color: #fff;
	}

	.input .li .right .b {
		display: inline-block;
		width: 40rpx;
		text-align: center;

	}

	.input .li .right .b image {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}

	.input .li .x {
		display: inline-block;
		vertical-align: middle;
		width: 1px;
		height: 30rpx;
		background: #E5E5E5;
		/* margin-left: 25rpx; */
	}

	.input .li .right .but {
		font-size: 26rpx;
		width: calc(100% - 65rpx - 16rpx - 15rpx);
		margin-left: 25rpx;
		display: inline-block;
		vertical-align: middle;
		color: #8F8F94;
	}

	.input .p {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(162, 162, 162, 1);
		margin-top: 44rpx;
		text-align: left;
	}
</style>
